import "./media-view.less";
export default {
    template:` 
            <div id="media-view">
                <div class="close-media-view" @click="$emit('close')"><i class="iconfont icon-guanbi"></i></div>
                <img v-if="type === 'image'" ref="img" :src="media" :style="image_style" />
                <video class="video" v-else controls :src="media"></video>
            </div> 
            `,
    data:function(){
        return {
            image_style:{}  //图片style样式
        }
    },
    props:{
        media:{
            type:String
        },
        type:{
            type:String,
            default:"image"
        }
    },
    created:function(){
        this.imgCenter();
    },
    methods: {
        //图片居中
        imgCenter(){
            this.image_style = {
                transform:"translateX(-50%) translateY(-50%)",
                left:'50%',
                top:'50%'
            }
        }
    }
};